#cnblogs_post_body,
.cnblogs-post-body {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: inherit;
    font-weight: $font-weight-base;
    color: $color-accent;
  }

  h1 {
    font-size: $font-size-base + 10;
  }
  
  h2 {
    position: relative;
    font-size: $font-size-base + 6;
  }
  
  h3 {
    position: relative;
    font-size: $font-size-base + 4;
  }
  
  h4 {
    font-size: $font-size-base + 2;
  }
  
  h5 {
    font-size: $font-size-base;
  }
  
  h6 {
    font-size: $font-size-base - 2;
  }

  h2,
  h3,
  h4 {
    margin-bottom: $font-size-base * 2;

    &:not(:first-child) {
      margin-top: 2.875em;
    }
  }

  a > span {
    color: $color-text;
  }

  h2, h3, h4, h5 {
    > a {
      opacity: 0;
      transition: opacity 150ms ease;
    }

    &:target {
      animation: bc-anim-highlight 2s ease;
    }

    &:hover a {
      opacity: 1;
    }
  }

  p {
    margin: 0 0 $font-size-base / 2 0;
  }

  ul, ol {
    margin: 0 auto $font-size-base / 2;
    padding-left: 1.5em;
  }

  ul li {
    list-style-type: square;
  }

  ol li {
    list-style-type: decimal;
  }

  img {
    max-width: 100%;
    border: 1px solid $color-border;
  }

  table {
    border-color: $color-border;

    th {
      font-weight: $font-weight-base;
      background-color: $color-fill;
    }

    th,
    td {
      border-color: $color-border;
      min-width: 120px;
    }
  }

  blockquote p:last-child {
    margin-bottom: 0;
  }
}

.cnblogs-markdown,
.cnblogs-post-body {

  @import "hljs-atom-one-dark";

  pre,
  code,
  kbd,
  samp {
    font-family: $font-family-monospace !important;
    font-size: $font-size-base !important;
  }

  code {
    display: inline;
    font-family: "Courier New",STSong,Helvetica,Tahoma,Arial,sans-serif !important;
  }

  kbd {
    padding: 3px 6px;
    border: none;
    background-color: $color-text;
    font-size: 87.5% !important;
    font-weight: 700;
    color: $color-white;
    box-shadow: 0 2px 1px 0 rgba($color-black, .1);

    kbd {
      padding: 0;
      font-size: 100% !important;
      box-shadow: none;
    }
  }

  code {
    margin: 0 !important;
    padding: 3px 6px !important;
    border: none !important;
    border-radius: 0 !important;
    line-height: normal;
    vertical-align: baseline;
    background-color: $color-background !important;
    font-size: 87.5% !important;
    word-wrap: break-word;

    &.hljs {
      font-family: $font-family-monospace !important;
    }
  }

  a > code {
    color: inherit !important;
  }

  pre {
    position: relative;
    max-height: 40em;
    padding: 0 $font-size-base $font-size-base;
    background-color: #2d3748;

    &:before {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      margin: $font-size-base;
      background-color: #f56565;
      border-radius: 9999px;
      box-shadow: 20px 0 0 0 #fbd38d, 40px 0 0 0 #48bb78;
      transition: background-color .3s, box-shadow .3s;
    }

    // Scrollbar
    .resize-observer > code,  
    > code {
      padding: 0 !important;
      border: none !important;
      min-width: 480px;
    }

    .shadow.is-vertical {
      top: 2 * $font-size-base + 12;
    }

    .scrollbar.is-vertical {
      top: 2 * $font-size-base + 12 + 2;
    }

    .thumb {
      &:before {
        background-color: rgba($color-white, .5);
      }
  
      &:hover:before {
        background-color: rgba($color-white, .6);
      }
    
      &:active:before {
        background-color: rgba($color-white, .75);
      }
    }
  }
}
